<template>
   <el-button @click="fetchUserInfo()">查询</el-button>
   
   <el-card v-if="userInfo" class="user-card">
       <div slot="header" class="clearfix">
         <span>用户信息</span>
       </div>
       <div>
         <p>姓名：{{ userInfo.realname }}</p>
         <p>性别：{{ userInfo.sex }}</p>
         <p>邮箱：{{ userInfo.mail }}</p>
         <p>电话：{{ userInfo.telephone }}</p>
         <p>地址：{{ userInfo.address }}</p>
         <p>生日：{{ userInfo.birthday }}</p>
       </div>
	   <el-button @click="changeInfo()">修改信息</el-button>
     </el-card>
	 
	 <el-card v-if="editing" class="user-card">
	      <div slot="header" class="clearfix">
	        <span>修改用户信息</span>
	      </div>
	      <el-form :model="editForm" label-width="80px">
	        <el-form-item label="邮箱">
	          <el-input v-model="editForm.mail"></el-input>
	        </el-form-item>
	        <el-form-item label="生日">
	          <el-input v-model="editForm.editedBirthday"></el-input>
	        </el-form-item>
	        <el-form-item label="地址">
	          <el-input v-model="editForm.editedAddress"></el-input>
	        </el-form-item>
	        <el-form-item>
	          <el-button type="primary" @click="save()">提交</el-button>
	          <el-button @click="cancelEdit()">取消</el-button>
	        </el-form-item>
	      </el-form>
	    </el-card>
</template>

<script setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { usePersonStore } from '../store/person.js';
  import { getUserInfo,changeUserInfo } from '../utils/requestApi.js';



  const userInfo = ref(null); // 新增用于存储用户信息的变量
  const editing = ref(false);
    const editForm = ref({
      mail: '',
      editedBirthday: '',
      editedAddress: ''
    });

  const fetchUserInfo = () => {
      const token = localStorage.getItem("token");
      console.log("token:", token);

      getUserInfo({ token: token }).then(response => {
          if (response.data.result) {
              userInfo.value = response.data.data; // 将后端返回的用户信息保存到 userInfo 变量中
              ElMessage({
                  message: '查询成功',
                  type: 'success'
              });
          } else {
              ElMessage({
                  message: '查询失败',
                  type: 'error'
              });
          }
      }).catch(error => {
          ElMessage({
              message: '查询出错',
              type: 'error'
          });
          console.error(error);
      });
	  console.log(userInfo)
  };
  
   const changeInfo = () => {
        editing.value = true;
        editForm.value.mail = userInfo.value.mail;
        editForm.value.editedBirthday = userInfo.value.birthday;
        editForm.value.editedAddress = userInfo.value.address;
    };

 const save = () => {
       const updatedInfo = {
           realname: userInfo.value.realname,
           birthday: editForm.value.editedBirthday,
           address: editForm.value.editedAddress,
		   mail: editForm.value.mail
       };
       
       changeUserInfo(updatedInfo).then(response => {
           if (response.data.result) {
               ElMessage({
                   message: '信息修改成功',
                   type: 'success'
               });
              
               userInfo.value.mail = editForm.value.mail;
               userInfo.value.birthday = editForm.value.editedBirthday;
               userInfo.value.address = editForm.value.editedAddress;
             
               editing.value = false;
           } else {
               ElMessage({
                   message: '信息修改失败',
                   type: 'error'
               });
           }
       }).catch(error => {
           ElMessage({
               message: '信息修改出错',
               type: 'error'
           });
           console.error(error);
       });
	   console.log(updatedInfo);
   };

</script>


<style>

</style>
